import React, { Component, Fragment } from 'react';//Fragment占位符不显示标签
import TodoItem from './TodoItem';
import Test from './Test';
import axios from 'axios';
import './style.css';

class TodoList extends Component {
  //创建对象
  constructor(props){
    super(props);
    //props,state,render的关系：1.当组件的state或者props发生改变的时候,render函数就会重新执行;2.当父组件的render函数被执行时，他的子组件的render都被重新执行
    this.state={
      inputValue:'',
      list:['<h1>12</h1>']
    };
    //比较好的事件绑定方法，否则多次被渲染生成多个实例
    this.handleBtnClick=this.handleBtnClick.bind(this);
  }

  //生命周期函数
  //在组件即将被挂载到页面的时刻自动执行(第一次被执行)
  componentWillMount(){
    console.log('componentWillMount')
  }

  //在组件被挂载到页面的后自动执行(第一次被执行),ajax放在这里
  componentDidMount(){
    console.log('componentDidMount');
    axios.get('/spi/todolist').then(()=>{

    }).catch(()=>{
      
    })
  }

  //在组件被更新之前自动执行,一定要返回一个布尔值，true是更新组件，false则不更新组件
  shouldComponentUpdate(){
    console.log('shouldComponentUpdate');
    return true;
  }

  //在组件被更新之前会自动执行，但是在shouldComponentUpdate之后执行，shouldComponentUpdate返回true执行，返回false不执行
  componentWillUpdate(){
    console.log('componentWillUpdate');
  }

  //在组件被更新之后会自动执行
  componentDidUpdate(){
    console.log('componentDidUpdate');
  }

  //一个组件要从父组件接受参数，只要父组件的render函数被执行，子组件的componentWillReceiveProps就会被执行
  componentWillReceiveProps(){
    console.log('child componentWillReceiveProps');
  }

  //一个组件被移出元素就会被执行
  componentWillUnmount(){
    console.log('child componentWillUnmount');
  }


  //页面渲染
  render() {
    console.log('render');
    return (
      <Fragment>
          <div>
            <label htmlFor='insertArea'>输入内容</label>
            <input id='insertArea' className='input' value={this.state.inputValue} onChange={this.handleInputChange.bind(this)} />
            <button onClick={this.handleBtnClick}>提交</button>
            </div>
          <ul ref={(ul)=>{this.ul=ul}}>
            {this.getTodoItem()}
          </ul>
          <Test content={this.state.inputValue} />
      </Fragment>  
    );
  }

  //封装js
  getTodoItem(){
    // dangerouslySetInnerHTML:进行html转义
    return this.state.list.map((item,index)=>{
        return (
          <TodoItem key={item} index={index} content={item} delteItem={this.handleItemDelte.bind(this)} />
          // <li 
          //   key={index} 
          //   onClick={this.handleItemDelte.bind(this,index)}
          //   dangerouslySetInnerHTML={{__html: item}}
          // >
          // </li>
        )
      })
  }

  handleInputChange(e){
    const value=e.target.value
    this.setState(()=>({
        inputValue: value
    }));
    // this.setState({
    //   inputValue:e.target.value
    // })
  }

  handleBtnClick(e){
    //...展开数组元素生成新的数组
    // this.setState({
    //   list:[...this.state.list, this.state.inputValue],
    //   inputValue:''
    // })
    //prevState修改之前的数据
    this.setState((prevState)=>({
        list:[...prevState.list, prevState.inputValue],
        inputValue:''
    }),()=>{
      //setState异步函数执行完后执行
      console.log(this.ul.querySelectorAll('li').length)
    })
  }

  handleItemDelte(index){
    //immutable：Immutable Data 就是一旦创建，就不能再被更改的数据
    //state不允许直接做修改，若要修改需拷贝出来再做修改
    // const list=[...this.state.list];
    // list.splice(index,1);
    // this.setState({
    //   list:list
    // })
    this.setState(()=>{
      const list=[...this.state.list];
      list.splice(index,1);
      return {
        list:list
      }
    })
  }
}

export default TodoList;
